<template>
  <div
    v-loading="loading"
    v-empty="list"
    xs-empty-custom-close="1"
    class="rc-cont"
    style="padding-right:10%;min-height:500px;"
  >
    <flexbox
      v-for="(item, index) in list"
      :key="index"
      class="ha-cont"
      align="stretch"
      justify="flex-start"
    >
      <div class="ha-week">
        <span>
          {{ item.createTime | filterTimestampToFormatTime("MM-DD") }}
        </span>
        <span class="ml-10">
          {{ item.createTime | filterTimestampToFormatTime("HH:mm") }}
        </span>
      </div>
      <!-- <div class="ha-time">{{ item.createTime|filterTimestampToFormatTime('HH:mm') }}</div> -->
      <div class="ha-circle d-flex align-items-center justify-content-center" />
      <div class="d-flex flex-column">
        <div class="ha-name">{{ item.realname }}</div>
        <div class="ha-content">
          <p v-for="(info, infoIndex) in item.content" :key="infoIndex">
            {{ info }}
          </p>
        </div>
      </div>

      <div class="ha-line" />
    </flexbox>
  </div>
</template>

<script type="text/javascript">
import crmTypeModel from "@/views/crm/model/crmTypeModel";
import { crmIndexFieldRecordAPI } from "@/api/crm/common";

export default {
  name: "RelativeHandle", // 相关操作  可能再很多地方展示 放到学员管理目录下
  components: {},
  props: {
    /** 模块ID */
    id: [String, Number],
    /** 联系人人下 新建商机 需要联系人里的学员信息  合同下需要学员和商机信息 */
    detail: {
      type: Object,
      default: () => {
        return {};
      }
    },
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: ""
    },
    /** 是公海 默认是学员 */
    isSeas: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      list: []
    };
  },
  inject: ["rootTabs"],
  computed: {},
  watch: {
    id(val) {
      this.list = [];
      this.getDetail();
    },

    "rootTabs.currentName"(val) {
      if (val === "RelativeHandle") {
        this.getDetail(false);
      }
    }
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail(loading = true) {
      this.loading = loading;
      crmIndexFieldRecordAPI({
        types:
          this.crmType == "vipStudents" ? 19 : this.crmType == "roiMoney" ? 19 : crmTypeModel[this.crmType],
        actionId: this.id
      })
        .then(res => {
          this.loading = false;
          this.list = res.data.map(item => {
            item.createTime = new Date(item.createTime).getTime();
            return item;
          });
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../styles/relativecrm.scss";
.ha-cont {
  font-size: 12px;
  position: relative;
  line-height: 20px;
  min-height: 80px;
  padding-top: 3px;
  .ha-week {
    margin: 0 10px 0 0;
    flex-shrink: 0;
    color: #333333;
    font-size: 13px;
    width: 80px;
  }
  .ha-time {
    padding: 0 10px 0 24px;
    flex-shrink: 0;
    color: #aaa;
  }
  .ha-circle {
    width: 28px;
    height: 28px;
    background: #e5effe;
    border-radius: 50%;
    margin-top: -4px;
    z-index: 2;
  }
  .ha-circle::after {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid #0066f9;
    border-radius: 50%;
  }
  .ha-img {
    flex-shrink: 0;
    margin: -3px 10px 0 10px;
    display: block;
  }
  .ha-name {
    padding: 0 10px;
    flex-shrink: 0;
    color: #333;
    font-weight: bold;
    font-size: 14px;
  }
  .ha-content {
    padding: 12px 10px 10px 10px;
    flex: 1;
    color: #666;
    font-size: 13px;
  }
  .ha-line {
    position: absolute;
    z-index: 1;
    width: 1px;
    top: 3px;
    bottom: -3px;
    left: 103px;
    background-color: #e6e6e6;
  }
}
.ha-cont:last-child {
  .ha-line::after {
    display: block;
    content: " ";
    width: 10px;
    height: 10px;
    background: #d5d5d5;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: -4px;
  }
}
</style>
